<template>
  <div class="container">
    <img crossorigin="anonymous" id="img" ref="dogId" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0ucPLLnB4Pu1kMEs2uRZISegG5W7Icsb7tq27blyry0gnYhVOfg" alt="Dog">
    <div class="row">
      <div class="col">
        <b-list-group>
          <b-list-group-item></b-list-group-item>
        </b-list-group>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ImageClassifier } from '@/models/ImageClassifier';
import { TensorInformation } from '@/models/TensorInformation';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  private readonly classifier: ImageClassifier = new ImageClassifier();
  private tensors: TensorInformation[] | null = null;

  public Classify(): void {
    this.$nextTick().then(async () => {
      const dog = this.$refs.dogId;

      if (dog !== null && !this.tensors) {
        const image = dog as HTMLImageElement;
        this.tensors = await this.classifier.Classify(image);
      }
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
  margin 40px 0 0

ul
  list-style-type none
  padding 0

li
  display inline-block
  margin 0 10px

a
  color #42b983
</style>
